<template>
  <div class="select-lang bcl-bg">
    <!-- 按钮 -->
    <div class="flex flex-cc click" @click="langVisible = true">
      <img style="width: 20px" src="../assets/img/global.png" />
      <div class="fz-12 cl-basic ml-5 mr-5">
        {{ langs[0][defaultIndex].label }}
      </div>
      <van-icon name="arrow-down" color="#8e8e8e" :size="12"></van-icon>
    </div>

    <!-- 语言选择 -->
    <van-popup
      teleport="body"
      position="bottom"
      round
      v-model:show="langVisible"
    >
      <van-picker
        :title="$t('选择语言')"
        :cancel-button-text="$t('取消')"
        :confirm-button-text="$t('确定')"
        :columns="langs"
        :columns-field-names="{
          text: 'label',
          values: 'value',
        }"
        @cancel="langVisible = false"
        @confirm="onSelectLang"
      ></van-picker>
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 语言列表
const langs = ref([
  [
    { label: '简体中文', value: 'cn' },
    { label: 'English', value: 'en' },
    { label: 'Deutsch', value: 'ge' },
    { label: 'Français', value: 'fr' },
    { label: '繁體中文', value: 'tw' },
  ],
])
const langVisible = ref(false)

// 默认选择
const lang = localStorage.getItem('lang') || 'tw'
const index = langs.value[0].findIndex((v) => v.value === lang)
const defaultIndex = ref(index === -1 ? 0 : index)

// 选择语言
function onSelectLang({ selectedValues }) {
  const lang = selectedValues[0]
  localStorage.setItem('lang', lang)
  location.reload()
}
</script>

<style lang="scss" scoped>
.select-lang {
  padding: 0 5px;
  border-radius: 100px;
}
</style>
